<template lang="pug">
.details-wrap 
  heads(:title="title")
    span.goBack(@click="goBack") >
  ul.cont
    li(v-for="item in list", :key="item.id") 
      img(:src="item.picUrl")
      dl
        dt {{ item.title }}
        dd.content(v-html="item.content")
        dd.comment
          span.browseCount {{ item.browseCount }}
          span.commentCount {{ item.commentCount }}
          span.createTime {{ item.createTime }}
</template>

<script>
import heads from "@/components/head";
export default {
  name: "detail",
  data() {
    return {
      list: [],
      title: "",
    };
  },
  created() {
    let a = this.$route.query.id;
    let url = "/data/" + a + ".json";
    this.axios.get(url).then((res) => {
      console.log(res);
      this.list = res.data.item;
      this.title = res.data.name;

      console.log(this.list);
    });
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
  components: {
    heads,
  },
};
</script>

<style lang="scss" scoped>
.details-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #333 url("/detaBg.png") no-repeat;
  background-size: cover;
  z-index: 99;
  overflow: hidden;
  .cont {
    li {
      display: flex;
      font-size: 0.26rem;
      padding:.3rem .2rem;
      &+li {
        border-top: .01rem solid #e5e5e5;
      }
      img {
        width: 1.6rem;
        height: 1.2rem;
      }
      dl {
        width: 70%;
        margin-left: 0.2rem;
        dt {
          font-size: 0.3rem;
        }
        dd {
          &.content {
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            color: #999;
            line-height: .7rem;
            font-size: .18rem;
          }
          .createTime {
            float: right;
          }
        }
      }
    }
  }
  .goBack {
    float: left;
    margin-left: 0.3rem;
  }
}
</style>